<?php
include ("conn.php");
include ("functions.php");




//$user = (isset($_GET['user']))?$_GET['user']:'';



?>
<!DOCTYPE HTML>
<html>
<head>
	<title>Manolito</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link href="css/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'>
	<!-- link href="css/hot-sneaks/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" / -->
	
	<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
	<!-- script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script -->
	<script type="text/javascript" src="js/jquery.calendar-widget.js"></script>
	<script type="text/javascript" src="js/jquery.simpletip-1.3.1.min.js"></script>
	<script type="text/javascript">
		<!--
		var params = {};
		params['status'] = 1;
		
		$(document).ready(function() {
			$("#calendar").calendarWidget();
			//$("#task-status-group").buttonset();

			$("#calendar a").click(function(e) {
				e.preventDefault();
				params['date'] = $(this).attr("href");
				$("#calendar td").removeClass("active");
				$(this).parent().addClass("active");
				return false;
			});
			$("#task-status0").click(function(e) {
				e.preventDefault();
				params['status'] = 0;
				$("#task-when").fadeOut('fast');
				$("#task-status-group label").removeClass('active');
				$(this).parent().addClass('active');
			});
			$("#task-status1").click(function(e) {
				e.preventDefault();
				params['status'] = 1;
				$("#task-when").fadeOut('fast');
				$("#task-status-group label").removeClass('active');
				$(this).parent().addClass('active');
			});
			$("#task-status2").click(function(e) {
				e.preventDefault();
				params['status'] = 2;
				$("#task-when").removeClass('status3').addClass('status2').fadeIn('fast');
				$("#task-status-group label").removeClass('active');
				$(this).parent().addClass('active');
			});
			$("#task-status3").click(function(e) {
				e.preventDefault();
				params['status'] = 3;
				$("#task-when").removeClass('status2').addClass('status3').fadeIn('fast');
				$("#task-status-group label").removeClass('active');
				$(this).parent().addClass('active');
			});
			$("#task-length").blur(function() {
				var lengthVal = $("#task-length").val();
				/*if (lengthVal != '15' && lengthVal != '30' && lengthVal != '45' && lengthVal != '60' && lengthVal != '120' && lengthVal != '180') {
					$("#task-length-group a").removeClass('active');
				} else {
					$("#task-length-group a[href=#"+lengthVal+"]").addClass('active');
				}*/
				$("#task-length-group a").removeClass('active');
				if ($("#task-length-group a[href=#"+lengthVal+"]").length) {
					
					$("#task-length-group a[href=#"+lengthVal+"]").addClass('active');
				} else {
				}
			});
			$("#task-length-group a").click(function(e) {
				e.preventDefault();
				$("#task-length").val($(this).attr('href').replace('#',''));
				$("#task-length-group a").removeClass('active');
				$(this).addClass('active');
			});
			$("#action-task-when-close").click(function(e) {
				e.preventDefault();
				$("#task-when").fadeOut('fast');
			});			
			$("#action-save").click(function(e) {
				e.preventDefault();
				//$("#system-status").hide();
				$("#task-when").fadeOut('fast');
				
				params['action'] = 'add';
				params['desc'] = $("#task-desc").val();
				params['category'] = parseInt($("#task-category").val(),10);
				params['length'] = parseInt($("#task-length").val(),10);
				/*params['status'] = parseInt($("#task-status-group input[name='task-status']:checked").val(),10);
				if (params['status'] == 1) {
					params['status'] = 2;
				}*/
				params['hour'] = parseInt($("#task-hour").val(),10);
				params['minute'] = parseInt($("#task-minute").val(),10);
				if (!params['date']) {
					params['date'] = $("#calendar td.active a").attr("href");
				}
				
		    	var data = jQuery.param(params);
				$.ajax({
					type: "POST",
					url: "ajax.php",
					data: data,
					success: function(msg){
						if (msg == "ok") {
							//$("#system-status").html("<strong>"+params['desc']+"</strong>: deu certo!");
							statusMsg = "<strong>"+params['desc']+"</strong> gravado!";
						//	$("#header").animate({height:'64px'}, {queue:true, duration:500}).animate({height:'64px'}, {queue:true, duration:8000}).animate({height:'32px'}, {queue:true, duration:500})
							getTasks(null,statusMsg);
							// atualizar...
							//$("#cat-row-"+params['category']+" ul").append('<li>'+params['desc']+'</li>');
						} else {
							alert(msg);
						}
					}
				});
				return false;
			});
			
			$("#action-update").click(function(e) {
				e.preventDefault();
				getTasks(null,null);
			});
			
			// START
			getTasks(null,null);
		});
		
		function getTasks(status,statusMsg) {
			$.ajax({
				type: "POST",
				url: "ajax.php",
				data: "action=getTasks",
				success: function(msg){
					if(msg != 'error') {
						$('#tasks tbody').html(msg);
						//$("#system-status").html("Atualizado.").show().animate({height:'16px'}, {queue:true, duration:500}).animate({height:'16px'}, {queue:true, duration:8000}).animate({height:'0'}, {queue:false, duration:500}).hide();
						if (statusMsg != null) {
							$("#system-status").html(statusMsg).attr('class','ui-corner-all status-'+params['status']);
						} else {
							$("#system-status").html("Atualizado.");
						}
						$("#header").animate({height:'64px'}, {queue:true, duration:500}).animate({height:'64px'}, {queue:true, duration:8000}).animate({height:'32px'}, {queue:true, duration:500})
						/*$("#tasks tbody li").simpletip({
							fixed: true,
							position: 'top',
							content: 'pp'+$('this').attr('title')
						});*/
						setDraggableTasks();
						$("#tasks tbody li").each(function(i){
							$(this).simpletip({
								position: 'top',
								content: $(this).attr('title')
							});
						}); 
					}
				}
			});
		}
		
		function setDraggableTasks() {
			$( "#tasks li" ).draggable({ revert: "invalid" });
			$( "#tasks .category-lnk, #task-status-group label[for=task-status1], #task-status-group label[for=task-status2] ").droppable({
				activeClass: "",
				hoverClass: "droppable-hover",
				drop: function( event, ui ) {
					//$(this).addClass("ui-state-highlight");
					//$(ui.draggable).addClass('status-2');
					var droppableStatus = 0;
					if ($(this).attr('for') == 'task-status1') {
						droppableStatus = 1;
					} else if ($(this).attr('for') == 'task-status2') {
						droppableStatus = 2;
					}
					var currentDraggableStatus = 0;
					if ($(ui.draggable).hasClass('status-3')) {
						currentDraggableStatus = 3;
					}
					$("#system-status").html( "Dropped: "+droppableStatus+" | "+ getTotalStatus(droppableStatus));
					var currentPos = (getTotalStatus(droppableStatus)+1);
					$(ui.draggable).css({'top':'auto','left':'auto','position':'inherit'}).attr('class','status-'+droppableStatus+' status-'+droppableStatus+'-'+currentPos);
					//alert(getTotalStatus(draggableStatus));
				}
			});
		}
		
		function getTotalStatus(status) {
			var total = $("#tasks li.status-"+status).length;
			return total;
		}
		-->
	</script>
	<style type="text/css">
	
		header {display:block;}
		#header {padding:8px; position:absolute; right:0px; top:0px; width:15em; height:32px; background-color:#F0F0F0; overflow:hidden; display:block;}
			#header h1 {font-family: 'Cabin Sketch', arial, serif; font-size:32px; margin:8px 0 18px; color:#000; text-align:center;}
			#system-status {padding:5px 5px 4px; height:16px; background-color:#FFF;}
			#system-status.status-0 {background-color:#F4CC1A; color:#FFF; text-shadow: 1px 1px 1px #555;}
			#system-status.status-1 {background-color:#60D23E; color:#FFF; text-shadow: 1px 1px 1px #555;}
			#system-status.status-2 {background-color:#6AC65F; color:#FFF; text-shadow: 1px 1px 1px #555;}
			#system-status.status-3 {background-color:#338FA8; color:#FFF; text-shadow: 1px 1px 1px #555;}

		#task-desc-group {margin:0 0 8px; float:left; width:100%;}
		
		#task-status-group {margin-right:1em; width:250px; float:left;}
			#task-status-group label {padding-top:8px; width:50%; overflow:hidden; height:30px; text-align:center; display:block; float:left; color:#333; font-size:13px; font-weight:bold; background-color:#F0F0F0; cursor:pointer;}
			#task-status-group label:nth-child(1) {-moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em;}
			#task-status-group label:nth-child(2) {-moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em;}
			#task-status-group label:nth-child(3) {-moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em;}
			#task-status-group label:nth-child(4) {-moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em;}
			#task-status-group label.active {color:#FFF; text-shadow: 1px 1px 1px #555;}
			#task-status-group label:nth-child(1).active {background-color:#F4CC1A;}
			#task-status-group label:nth-child(2).active {background-color:#6AC65F;}
			#task-status-group label:nth-child(2).droppable-hover {background-color:#60D23E;}
			#task-status-group label:nth-child(3).active {background-color:#338FA8;}
			#task-status-group label:nth-child(4).active {background-color:#509466;}
			#task-status-group label:nth-child(4).droppable-hover {background-color:#60D23E;}
			#task-status-group input {margin:-20px -20px 0 0; visibility:hidden;}

		#task-when {padding:6px 7px; background-color:#FFF; left:5%; position:absolute; top:132px; width:236px; display:none; z-index:5; -moz-box-shadow: 3px 3px 3px #999; -webkit-box-shadow: 3px 3px 3px #999; box-shadow: 3px 3px 3px #999;}
		#task-when.status2 {background-color:#509466;}
		#task-when.status3 {background-color:#338FA8;}
			#calendar {padding-left:6px;}
					#calendar td, #calendar th {width:30px; }
					#calendar td a {display:block; background-color:#FFF; color:#333; padding:6px 0; text-align: center; font-weight:bold; font-size:14px;}
					#calendar td.other-month a { background:none; background-color:#CCC; color:#666;}
					#calendar td.active a { background-color:#246475; color:#FFF;}
					#task-when.status2 #calendar td.active a {background-color:#386747;}
					
			#task-hour-group {margin:6px auto 3px; width:60%; text-align:center; color:#FFF;}
			#action-task-when-close {width:24px; height:24px; margin:-27px 4px 0 0; float:right; background:url('i/bt_check01.png') no-repeat 0 0; text-indent:-100em; overflow:hidden; display:block;}

		#task-length-group, #task-length {width:140px; float:left;}
			#task-length-group ul {width:156px; float:left;}
				#task-length-group li {float:left; margin:2px 4px 2px 0;}
					#task-length-group li a {display:block; float:left; width:45px; text-align:center; background-color:#FFF; border:1px solid #999; font-size:11px; color:#333;}
					#task-length-group li a:hover {border:1px solid #000;}
					#task-length-group li a.active {background-color:#999; color:#FFF;}

		#task-desc {width:16em; margin-right:1em;}

		#action-save {margin:1em; float:left;}
	</style>
</head>
<body>
	<header id="header" class="ui-corner-bl">
		<h1>Manolito</h1>
		<p id="system-status" class="ui-corner-all">&nbsp;</p>
	</header>
	<section id="wrapper">
		<form action="#">
			<fieldset>
				<div id="task-desc-group">
					<input type="text" name="task-desc" id="task-desc" value="" />
					<? echo buildCategoriesCombo($categories); ?>
				</div>
				<div id="task-status-group">
					<label for="task-status0"><input type="radio" id="task-status0" name="task-status" value="0" /> Pendente</label>
					<label for="task-status1" class="active"><input type="radio" id="task-status1" name="task-status" value="1" checked="checked" /> Acabei de fazer</label>
					<label for="task-status3"><input type="radio" id="task-status3" name="task-status" value="3" /> Agendar...</label>
					<label for="task-status2"><input type="radio" id="task-status2" name="task-status" value="2" /> Feito em...</label>
				</div>
				<div id="task-when" class="ui-corner-bottom">
					<div id="calendar">
						<p>Please enable Javascript to view this calendar.</p>
					</div>
					<div id="task-hour-group">
						<select name="task-hour" id="task-hour">
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23" selected="selected">23</option>
						</select>
						<span class="by">:</span>
						<select name="task-minute" id="task-minute">
							<option value="0" selected="selected">00</option>
							<option value="5">05</option>
							<option value="10">10</option>
							<option value="15">15</option>
							<option value="20">20</option>
							<option value="25">25</option>
							<option value="30">30</option>
							<option value="35">35</option>
							<option value="40">40</option>
							<option value="45">45</option>
							<option value="50">50</option>
							<option value="55">55</option>
						</select>
					</div>
					<a href="#" id="action-task-when-close">Fechar</a>
				</div>
				<div id="task-length-group">
					<input type="text" name="task-length" id="task-length" value="" size="8" />
					<ul>
						<li><a href="#15" class="ui-corner-all active">15 min</a></li>
						<li><a href="#30" class="ui-corner-all">30 min</a></li>
						<li><a href="#45" class="ui-corner-all">45 min</a></li>
						<li><a href="#60" class="ui-corner-all">1h</a></li>
						<li><a href="#120" class="ui-corner-all">2h</a></li>
						<li><a href="#180" class="ui-corner-all">3h</a></li>
					</ul>
				</div>
				<input type="submit" value="Salvar!" name="action-save" id="action-save" />
			</fieldset>
		</form>
		<p><a href="#" id="action-update">Atualizar</a> Onde: - Período: <?=$weekRange['first']?> - <?=$weekRange['last']?></p>
		<div id="tasks">
			<table>
				<tbody>
					<? echo buildTasksList($tasks); ?>
				</tbody>
			</table>
		</div>
	</section>
</body>
</html>